<script setup>
import { ref, onMounted } from 'vue'
import { RequestGetUserInfo } from '@/api/Account.js'
import { useUserStore } from '@/stores/User.js'
import { UserFilled } from '@element-plus/icons-vue'
const userStore = useUserStore()
const userInfo = ref({})

// 性别映射
const genderMap = {
  0: '女',
  1: '男',
  null: '未设置'
}

// 角色映射
const roleMap = {
  1: '普通用户',
  2: '管理员',
  3: '超级管理员'
}

// 状态映射
const statusMap = {
  0: '禁用',
  1: '正常'
}

// 格式化时间（可简化为仅日期）
const formatDate = (time) => {
  return time ? time.split('T')[0] : '未知'
}

// 获取用户信息
async function requestUserInfo() {
  try {
    const res = await RequestGetUserInfo()
    console.log('获取用户信息成功', res.data.data)
    userInfo.value = res.data.data
    userStore.setUserInfo(res.data.data)
  } catch (e) {
    console.log('获取用户信息失败', e)
  }
}

onMounted(() => {
  requestUserInfo()
})
</script>

<template>
  <div class="user-info-container">
    <el-card shadow="hover" class="user-card">
      <!-- 卡片头部：用户信息 + 右侧编辑按钮 -->
      <template #header>
        <div class="card-header">
          <!-- 左侧：头像和基本信息 -->
          <div class="user-basic-info">
            <el-avatar
                :size="60"
                :icon="UserFilled"
                :src="userInfo.avatar || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
            />
            <div class="user-text">
              <h3>{{ userInfo.nickname || userInfo.username || '未知用户' }}</h3>
              <div class="user-role">
                <el-tag size="small" :type="userInfo.role === 2 ? 'success' : 'info'">
                  {{ roleMap[userInfo.role] || '未知角色' }}
                </el-tag>
                <el-tag size="small" :type="userInfo.status === 1 ? 'success' : 'danger'" style="margin-left: 8px">
                  {{ statusMap[userInfo.status] }}
                </el-tag>
              </div>
            </div>
          </div>

          <!-- 右侧：编辑按钮 -->
          <div class="edit-btn" @click="$router.push('/userInfo/edit')">
            <el-icon><Edit /></el-icon>
          </div>
        </div>
      </template>

      <!-- 主体：信息列表 -->
      <el-descriptions :column="1" border size="large" label-width="200px">
        <el-descriptions-item>
          <template #label>
            <el-icon><Connection /></el-icon>
            用户名
          </template>
          {{ userInfo.username || '——' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <el-icon><User /></el-icon>
            昵称
          </template>
          {{ userInfo.nickname || '——' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <el-icon><Phone /></el-icon>
            手机号
          </template>
          {{ userInfo.phone || '——' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <el-icon><Message /></el-icon>
            邮箱
          </template>
          {{ userInfo.email || '——' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <el-icon><Lock /></el-icon>
            性别
          </template>
          {{ genderMap[userInfo.gender] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <el-icon><Clock /></el-icon>
            注册时间
          </template>
          {{ formatDate(userInfo.createdTime) }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<style scoped>
.user-info-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.user-card {
  border-radius: 12px;
  overflow: hidden;
}

/* 卡片头部：左右布局 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.user-basic-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-basic-info .user-text {
  display: flex;
  flex-direction: column;
}

.user-basic-info h3 {
  margin: 0;
  font-size: 1.4em;
  color: #303133;
}

.user-basic-info .user-role {
  margin-top: 6px;
}

/* 编辑按钮 */
.edit-btn {
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 描述列表样式 */
:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #40454e;
}

:deep(.el-descriptions-item__content) {
  color: #606266;
}

/* 头像默认样式 */
:deep(.el-avatar) {
  background-color: #909399;
}
</style>
